<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <!--        <script>
                    window.onload = function() {
                        var paths = ["avalon","map","set", "util", "path"]
                        paths.forEach(function(path) {
                            var node = document.createElement("script")
                            node.src = path+".js"
                            document.head.appendChild(node)
                        })
                    }
                </script>-->
        <!--        <script src="observe.js">
        
                </script>
                <script>
                    var obj = {foo: {bar: 'baz'}};
                    var observer = new PathObserver(obj, 'foo.bar');
                    observer.open(function(newValue, oldValue) {
                        console.log(newValue, oldValue)
                        // respond to obj.foo.bar having changed value.
                    });
                    obj.foo.bar = 1
                    console.log(observer)
                    setTimeout(function() {
                        obj.foo.bar = 4
                    })
        
                </script>-->
        <script src="avalon2.js"></script>
        <script>
            var vmodel = avalon.define({
                $id: "xxx",
                a: 1,
                arr: [4, 5],
                b: {
                    c: 2
                },
                ddd: {
                    ccc: {
                        bbb: {
                            aaa: 3
                        }
                    }
                }
            })
            vmodel.$watch("a", function(a, b, c) {
                console.log(this, a, b, c)
            })
            vmodel.b.$watch("c", function(v) {
                console.log("b下面的c值发生改变了", v)
            })
            vmodel.arr.$watch("[*]", function(v) {
                console.log("数组监听自己的元素变化", v)
            })
            vmodel.arr.$watch("length", function(v) {
                console.log("length", v)
            })
            vmodel.$watch("b.c", function(a, b, c) {
                console.log("fire b.c ", a, b,c)
            })
            vmodel.$watch("arr[*]", function(a, b, c) {
                console.log("父对象监听子数组元素变化 ", a, b,c ,this)
            })
            vmodel.$watch("ddd.ccc.bbb.aaa", function(a, b, c) {
                console.log("深层对象监听 ", a, b, c, this)
            })
            setTimeout(function() {
                vmodel.a = "xxx"
            })
            setTimeout(function() {
                vmodel.b.c = 9
            })
            setTimeout(function() {
                vmodel.arr[0] = 10000
            })
            setTimeout(function() {
                vmodel.arr.push(12)
                vmodel.ddd.ccc.bbb.aaa = 999
            })
        </script>

    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>
